﻿@using KRM.Core.Library
@model KRM.Core.tblLoad
@{
    ViewBag.Title = "Send Despatched Confirmation SMS";
    Layout = "~/Views/Shared/_PopupLayout.cshtml";
    var phones = Model.Orders.Select(order => new phoneDetail(order)).ToList();
}
<script>
    function ajaxtemplatechange(templateid) {
        $.ajax({
            url: "/load/ajaxtemplatechange?templateid=" + templateid,
            success: function (data) {
                $(".templatesendsms").html(data);
            }
        });
    }
</script>
<div style="padding: 10px">
    @Html.Partial("Partial/_MessageResult")
    <form action="/load/SendDespatchedConfirmationSms" method="POST">
        <input type="hidden" name="loadid" value="@Model.LoadID"/>
        <fieldset>
            <legend>Receivers</legend>
            <table class="table table-hover table-bordered table-fix" style="font-size: 13px">
                <thead>
                    <tr>
                        <th style="text-align: center">IsChecked</th>
                        <th>Mobile No</th>
                        <th>Order</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in phones)
                    {
                        <tr>
                            <td style="text-align: center">
                                <input type="checkbox" name="mobileNo" disabled="disabled" value="@item.MobileNo" @(item.IsChecked ? "checked=checked" : "")/></td>
                            <td>@item.MobileNo</td>
                            <td>@item.Order.OrderRef</td>
                        </tr>
                    }
                </tbody>
            </table>
        </fieldset>

        <fieldset>
            <legend>Message</legend>
            <div class="pull-right">
                @Html.DropDownList("TemplateID", null, "Choose template", new { style = "width: 150px; height: 24px; padding: 0", onchange = "ajaxtemplatechange(this.value)" })
            </div>
            <textarea class="input-block-level templatelength templatesendsms" rows="5" maxlength="160" name="message" required="required"
                      onKeyDown="limitText(this);" 
                      onKeyUp="limitText(this)">@ViewBag.Template</textarea>
            <div>
                <div class="pull-left">
                    <span class="textcount"></span>
                </div>
                <div class="pull-right">
                    <button class="btn btn-primary" type="submit">Send sms</button></div>
            </div>
        </fieldset>
    </form>
</div>
<script>
    $(document).ready(function() {
        $(".textcount").html(160 - $(".templatelength").val().length + "/160");
    })
</script>
